import React, { useState, useEffect } from 'react';
import { TransitionGroup, CSSTransition } from 'react-transition-group';
import { history as Router, withRouter } from 'umi';
import { Switch } from 'react-router';
import './index.less';

const routerType = {
  POP: 'back',
  PUSH: 'in',
  REPLACE: 'in',
};

export default withRouter(({ location, children, history }) => {
  return (
    <TransitionGroup
      style={{ height: '100%' }}
      className="transition_wrapper"
      childFactory={(child) =>
        React.cloneElement(child, { classNames: routerType[history.action] })
      }
    >
      <CSSTransition key={location.pathname} appear timeout={1000}>
        <Switch location={location}>
          {(children as any)?.props?.children}
        </Switch>
      </CSSTransition>
    </TransitionGroup>
  );
});
